<template>
  <el-scrollbar class="main-scroll">
    <div class="banner callIntro">
      <img :src="requireImg('join-banner.png')" />
    </div>
    <breadcrumb></breadcrumb>
    <div class="container-x-suit">
      <div class="Wrapper">
        <div class="shadow">
          <div class="logo"></div>
          <div class="form">
            <div class="formWrapper">
              <h3>加入我们</h3>
              <el-form label-width="50px"
                label-position="left" size="small"
                :model="form"
                :rules="rules"
                labelPosition="right"
                ref="form">
                <el-form-item label="姓名" prop="name">
                  <el-input placeholder="请输入你的姓名" v-model="form.name" />
                </el-form-item>
                <el-form-item label="工种" prop="workType">
                  <el-input placeholder="请输入你的工种" v-model="form.workType" />
                </el-form-item>
                <el-form-item label="人数" prop="count">
                  <el-input placeholder="请输入你班组的人数" v-model="form.count" />
                </el-form-item>
                <el-form-item label="电话" prop="call">
                  <el-input placeholder="请输入你的联系电话" v-model="form.call" />
                </el-form-item>
                <el-form-item label="留言" prop="tape">
                  <el-input type="textarea" :autosize="{ minRows: 8 }" v-model="form.tape" placeholder="给我们留言，写下你的想法~"></el-input>
                </el-form-item>
                <el-form-item class="flex-end">
                  <el-button type="primary" @click="show">立即创建</el-button>
                  <el-button @click="formResetFields">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <m-footer></m-footer>
  </el-scrollbar>
</template>

<script>
import Breadcrumb from '@/base/breadcrumb/breadcrumb'
import MFooter from '@/components/footer/footer'
import { requireImgMixin } from '@/common/js/mixin'

export default {
  name: 'JoinUs',
  mixins: [requireImgMixin],
  data() {
    return {
      form: {
        name: '',
        workType: '',
        count: '',
        call: '',
        tape: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' }
        ],
        workType: [
          { required: true, message: '请输入你的工种', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入你班组的人数', trigger: 'blur' }
        ],
        call: [
          { required: true, message: '请输入你的联系电话', trigger: 'blur' }
        ],
        tape: [
        ]
      }
    }
  },
  created() {
    this.$message({
      showClose: true,
      message: '暂不支持网上加入，请联系1353204****加入虎匠!',
      type: 'warning',
      duration: 0
    })
  },
  methods: {
    show() {
      this.$message({
        showClose: true,
        message: '暂不支持网上加入，请联系1353204****加入虎匠!',
        type: 'warning',
        duration: 0
      })
      console.log(this.form)
    },
    formResetFields() {
      this.$refs.form.resetFields()
    }
  },
  components: {
    Breadcrumb,
    MFooter
  }
}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'

.banner
  &.callIntro
    width:100%
    height: 477px
    background-color: $color-info
    img
      height: 100%
      position: relative
      left: 50%
      transform: translateX(-50%)
.Wrapper
  padding: 65px 20px
  &:before
    content: ''
    display: table
  &:after
    content: ''
    display: table
    clear: both
  .shadow
    display: flex
    height: 100%
    border-radius: 10px
    box-shadow: 2px 4px 10px 0px rgba(0,0,0,0.3)
  .logo
    flex: 1
    border-radius: 10px 0 0 10px
    background: $color-theme requireImg('logo-big.png') center center no-repeat
    box-sizing: border-box
  .form
    flex: 1
    float: left
    border-radius: 0 10px 10px 0
    background-color: #eeeef1
    box-sizing: border-box
    .formWrapper
      padding: 0 60px
    h3
      font-size: 24px
      text-align: center
      padding: 30px 0

.el-form-item--mini
.el-form-item--small
  &.el-form-item
    margin-bottom: 30px
.flex-end
  display: flex
  justify-content: flex-end

@media (max-width: $media-smail)
  .shadow
    flex-direction: column
  .logo
    height: 400px
    border-radius: 10px 10px 0 0 !important
  .form
    border-radius: 0 0 10px 10px !important
    .formWrapper
      padding: 0 20px !important

</style>
